<template>
	<view class="pages" :style="{'min-height':h+'px','padding-top':mt+'px'}">
		<c-nav-bar title="游玩定制"></c-nav-bar>
		<view class="top" :style="{'background':'url('+topBgImg+')','background-size':'cover'}">
			<view class="mainContent">
				<view class="custom">
					<view class="title">
						智能查询
					</view>
					<view class="custom1" style="background: #FBF8F1;"
						@click="toHref('/pagesTrip/custom-travel/newPreferChoose')">
						<image src="https://i.ringzle.com/file/20240111/3e1c1ba6a3754a21ae3bf19f8a4462ba.png" mode="">
						</image>
						<view class="right">
							<span style="color: #925A4A;">旅游定制</span>
							<span>一分钟搞定你的攻略</span>
						</view>
					</view>
					<view class="custom1" style="background: #E8F3FF;"
						@click="toHref('/pagesTaxi/travelPlanning1/Photorecognition')">
						<image src="https://i.ringzle.com/file/20240111/8d00776a1c304155a6714e09d0ef2d76.png" mode="">
						</image>
						<view class="right">
							<span style="color: #336AA6;">照片识别</span>
							<span>上传图片，识别文字的景点等攻略</span>
						</view>
					</view>
					<view class="custom1" style="background: #F0FDFD;">
						<image src="https://i.ringzle.com/file/20240111/075ec5c33955481099d9889b11d3c173.png" mode="">
						</image>
						<view class="right">
							<span style="color: #4F8289;">人工定制 - 正在开发中…</span>
							<span>1V1服务，专属定制您的出行</span>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="bottom">
			<!-- 上岛路线下方热门景点、酒店民宿、餐饮美食 -->
			<view class="pic" v-if='currentTab==1'>
				<view class="tabbar">

					<image class="tabar1" src="https://i.ringzle.com/file/20240111/1a9b156eb11e46598c5eed20e0d93246.png"
						v-if="currentIndex==1"></image>
					<image style="height: 25px;"
						src="https://i.ringzle.com/file/20240113/a8f7a15bb0a64136958d8185e05d3eba.png" class="tabar1"
						@click="clickTab(1)" v-else></image>

					<image class="tabar1" src="https://i.ringzle.com/file/20240111/1a974b9f72574570bc24e20ffe0ce681.png"
						v-if="currentIndex==2"></image>
					<image style="height: 25px;" class="tabar1"
						src='https://i.ringzle.com/file/20240113/d1f3f9b0909f4595bed6ffb0ce5b0d6e.png'
						@click="clickTab(2)" v-else></image>
					<image class="tabar1" src='https://i.ringzle.com/file/20240111/c881d86123584544aad5ec9d39ea028e.png'
						v-if="currentIndex==3"></image>
					<image style="height: 25px;" class="tabar1"
						src="https://i.ringzle.com/file/20240113/403edec3d02d4341936916906d926997.png"
						@click="clickTab(3)" v-else> </image>
				</view>
				<!-- 热门景点 -->
				<view class="showPic" v-if="currentIndex==1">
					<view class="cl_card" v-for="(item,index) in spotList" :key="index" @tap="toDetails(item,3)">
						<image :src="item.coverImage"></image>
						<view class="clc_info">
							<view class="clci_name">{{item.scenicSpotName}}</view>
						</view>
						<!-- <view class="clc_type">热门</view> -->
					</view>
				</view>
				<!-- 酒店民宿 -->
				<view class="showPic" v-else-if="currentIndex==2">
					<view class="cl_card" v-for="(item,index) in stayList" :key="index" @tap="toDetails(item,2)">
						<image :src="item.cover"></image>
						<view class="clc_info">
							<view class="clci_name">{{item.name}}</view>
						</view>
						<!-- <view class="clc_type">热门</view> -->
					</view>
				</view>
				<!-- 餐饮美食 -->
				<view class="showPic" v-else-if="currentIndex==3">
					<view class="cl_card" v-for="(item,index) in foodList" :key="index" @tap="toDetails(item,1)">
						<image :src="item.storeFrontPic"></image>
						<view class="clc_info">
							<view class="clci_name">{{item.name}}</view>
						</view>
						<!-- <view class="clc_type">热门</view> -->
					</view>
				</view>
			</view>


		</view>
		<view class="question" v-if='currentTab==2'>
			<view class="title">
				猜你想问
			</view>
			<u-collapse :border='false' accordion @change="change" @close="close" @open="open">
				<u-collapse-item :title="item[0].questionName" name="Docs guide" v-for="item,index in questionList"
					:key="index">
					<text class="u-collapse-content">{{item[0].name}}</text>
				</u-collapse-item>

			</u-collapse>
		</view>
		<view class="popUp v-calendan">
			<!-- 出发地弹窗 -->
			<u-popup :show="beginShow" @close="beginShowClose" closeOnClickOverlay :closeable='true' round='16'
				mode='bottom'>
				<view class="popupTitle">
					<text>请选择出发地</text>
				</view>
				<view class="tabs">
					<u-tabs :list="beginList" @click="chooseCityOrPort" :activeStyle="{
							color: '#2C2C2C',
							fontSize:'32rpx',
							fontWeight: 'bold'
						}" :inactiveStyle="{
							color: '#2C2C2C',
							fontSize:'32rpx',
							fontWeight: '400'
						}"></u-tabs>
				</view>

				<view class="city" v-if="!cityPortFlag">
					<view class="cityChoosed">
						<span style="color:#01B9F9 ; margin-right: 30rpx;" @click="()=>{
							provinceFlag=true
							province = ''
						}">{{province}}</span>
						<span style="color:#01B9F9 ;margin-right: 30rpx; ">{{city}}</span>
						<!-- <span v-if="province||city">请选择</span> -->

					</view>
					<scroll-view v-if="provinceFlag" :scroll-into-view="scrollTop" :scroll-y="true"
						style="height: 100%;">
						<span style="color: #a7a7a7;margin: 14px 16px;font-size: 28rpx;">热门城市</span>
						<view class="hotCity">
							<span :class="[cityIndex==index?'hotCity_selected':'']" v-for="item,index in hotCity"
								:key="index" @click="chooseHotCity(item,index)">
								{{item.name}}
							</span>
						</view>
						<view class="indexList">
							<view class="citysIndex">
								<view class="citysList">
									<view class="citysTitle">
										<label>所有城市</label>
									</view>
									<view class="citysIndexList">
										<view class="van-index-bar">
											<template v-for="(v,i) in groups">
												<view class="listIndexTitle" :id="v[0].initial">
													<label>{{v[0].initial}}</label>
												</view>
												<view @click="tapPrvince(q)" class="listIndexText" v-for="(q,w) in v"
													:key="q.id">
													<label :class="[q.checked?'cityChecked':'']">{{q.name}}</label>
												</view>
											</template>
											<!-- 右边字母坐标 -->
											<view class="index-sidebar">
												<template v-for="(v,i) in indexList">
													<view :class="[scrollTop==v?'index-bar:active':'index-bar']"
														@click="findCity(v)">{{v}}</view>
												</template>
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</scroll-view>
					<!-- 二级城市菜单 -->
					<scroll-view v-else :scroll-into-view="scrollTop" :scroll-y="true" style="height: 100%;">
						<view class="indexList">
							<view class="citysIndex">
								<view class="citysList">
									<view class="citysTitle">
										<label>所有城市</label>
									</view>
									<view class="citysIndexList">
										<view class="van-index-bar">
											<template v-for="(v,i) in cityList">
												<view class="listIndexTitle" :id="v[0].initial">
													<label>{{v[0].initial}}</label>
												</view>
												<view @click="tapCity(q)" class="listIndexText" v-for="(q,w) in v"
													:key="q.id">
													<label :class="[q.checked?'cityChecked':'']">{{q.name}}</label>
												</view>
											</template>
											<!-- 右边字母坐标 -->
											<view class="index-sidebar">
												<template v-for="(v,i) in indexList">
													<view :class="[scrollTop==v?'index-bar:active':'index-bar']"
														@click="findCity(v)">{{v}}</view>
												</template>
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
				<view class="port" v-else>
					<view class="mainContent">
						<span @click="chooseStartPort(index)" v-for="(item,index) in startPortList" :key="index"
							:class="startPortIndex==index?'portStyle_selected':'portStyle'">{{item.name}}</span>
					</view>
				</view>
			</u-popup>
			<!-- 目的地弹窗 -->
			<u-popup round='16' mode='bottom' @close="arriveShowClose" :show="arriveShow" closeOnClickOverlay='true'
				closeable>
				<view class="popupTitle">
					<text>请选择目的地</text>
				</view>
				<view class="mainContent">
					<span @click="chooseEndPort(index)" v-for="(item,index) in endPortList" :key="index"
						:class="endPortIndex==index?'portStyle_selected':'portStyle'">{{item.name}}</span>
				</view>
			</u-popup>
			<u-calendar @close='timeClose()' closeOnClickOverlay round='16' rowHeight='65' :show="timeShow"
				@confirm="timeConfirm" ref="calendar"></u-calendar>
			<cityPicker :column="column" :default-value="defaultValue" :mask-close-able="maskCloseAble"
				@confirm="cityConfirm" @cancel="cityCancel" :visible="visible" />
		</view>

	</view>


</template>

<script>
	import cityPicker from '@/uni_modules/piaoyi-cityPicker/components/piaoyi-cityPicker/piaoyi-cityPicker'
	export default {
		data() {
			return {
				h: uni.getSystemInfoSync().windowHeight,
				mt: uni.getSystemInfoSync().statusBarHeight + 44,
				city: '',
				groups: [],
				hotCitys: [],
				provinceList: [],
				indexList: [],
				cityData: {},
				province: '',
				scrollTop: '',
				indexList: ["A", "B", "C", 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'k', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S',
					'T', 'U', 'V', 'W', 'X', 'Y', 'Z'
				],

				cityIndex: null,
				hotCity1: [],
				startPortIndex: null,
				startPortList: [],
				hotCity: [],
				cityPortFlag: 0,
				beginShow: false,
				maskCloseAble: true,
				defaultValue: '330922',
				column: 2,
				timeShow: false,
				endPortIndex: null,
				beginList: [{
					name: '城市',
				}, {
					name: '码头',
				}],
				currentTab: 1,
				topTabBar: [
					'上岛路线',
					'游玩定制'
				],
				value: '1',
				begin: '',
				arrive: '',
				cityMemo: ['上海', '杭州', '宁波'],
				date: '12月06日',
				tabbar: ['热门景点', '酒店民宿', '餐饮美食'],
				currentIndex: 1,
				page: 1,
				limit: 10,
				list: [],
				leftList: [],
				rightList: [],
				fromData: {
					limit: 10,
					page: 1,
					sort: 1,
					scenicName: ''
				},
				arriveShow: false,
				endPortList: [],
				dataList: {
					queryDate: "",
					trafficType: 1,
					startSpot: {
						id: null,
						type: 2,
						name: ""
					},
					endSpot: {
						id: null,
						type: 1,
						name: ""
					}
				},
				time: '',
				spotList: [],
				stayList: [],
				foodList: [],
				HomestayFormData: {
					arriveDate: '',
					leaveDate: '',
					limit: 10,
					page: 1
				},
				foodFromData: {
					limit: 10,
					page: 1
				},
				visible: false,
				cityList: [],
				questionList: [],
				provinceFlag: true,
				maxQueryDayNum: '',
				topBgImg:'https://fsy.shengsi.gov.cn/file/20240717/5c60e44dca414a02b918cb3eff3a7007.png'
			}
		},
		components: {
			cityPicker
		},
		onLoad() {
			this.getLbList();
			this.getScenicSpotList();
			this.selectAllSpot()
			this.getHomestayPage()
			this.getFoodList()
			this.getQuestion()

			this.$refs.calendar.setFormatter(this.formatter);
		},
		onReady() {
			this.getMaxDate();
		},
		methods: {
			getLbList() {
				this.$api.get('/sys/isappletpic/queryBannerByType/25').then(res => {
					if (res.data.code === 0) {
						let list = res.data.data.bannerList.map(b=>b.path)
						if(list.length>0) this.topBgImg = list[0];
					}
				})
			},
			getMaxDate() {
				this.$api.get('/travel/isshipsaleconfig/page').then(res => {
					if (res.data.code === 0) {
						if (res.data.data.list.length > 0) {
							this.maxQueryDayNum = res.data.data.list[0].wysts;
						}
					} else this.$showModal(res.data.msg);
				})
			},
			formatter(day) {
				if (this.maxQueryDayNum) {
					for (let i = 0; i <= +this.maxQueryDayNum; i++) {
						let now = new Date(new Date().getFullYear() + '-' + day.month + '-' + day.day).Format(
							'yyyy-MM-dd');
						let temp = new Date(new Date().setDate(new Date().getDate() + i)).Format('yyyy-MM-dd');
						if (now == temp) {
							day.bottomInfo = '可售'
						}
					}
					return day
				}
			},
			getQuestion() {
				console.log('1111');
				// this.$api.get('/api/onlineservice/page', {
				// 	limit: 10,
				// 	page: 1
				// }).then(res => {
				// 	this.questionList = res.data.data.list
				// 	console.log(res, 'ressssssss+++---');
				// })
				this.$api.get('/api/onlineservice/list').then(res => {
					this.questionList = res.data.data
					console.log(res, 'ressssssss+++---');
				})
			},
			tapPrvince(province) {
				this.province = province.name
				const groups = {};
				for (const item of province.cityList) {
					const initial = item.initial;
					if (!groups[initial]) {
						groups[initial] = [];
					}
					groups[initial].push(item);
				}
				this.cityList = groups
				this.provinceFlag = false
				console.log(this.cityList, 'this.cityListthis.cityList');
			},
			tapCity(city) {
				console.log(city, 'city');
				this.city = city.name
				this.dataList.startSpot = city
				this.beginShowClose()
			},

			findCity(v) {
				console.log(v)
				this.scrollTop = v;
			},

			beginShowClose() {
				this.beginShow = false
				// this.visible = visible
			},
			// 出发地弹窗tabs切换
			chooseCityOrPort(e) {
				console.log(e, 'eeeeeeeee');
				this.cityPortFlag = e.index
			},
			// 打开出发地弹窗
			changeBegin() {
				this.beginShow = true
				// this.visible = true
				this.provinceFlag = true
				this.province = ''
				this.city = ''

			},
			cityCancel() {
				this.visible = false
			},
			cityConfirm(val) {
				this.dataList.startSpot.id = val.code
				this.dataList.startSpot.name = val.cityName
				console.log(val, 'val');
				this.visible = false
			},
			// onShareAppMessage(res) {
			// 	if (res.from === 'button') { // 来自页面内分享按钮
			// 		console.log(res.target, '1')
			// 	}
			// 	return {
			// 		title: 'data-cityPicker省市区地址选择器！',
			// 		path: '/pages/cityPicker/cityPicker'
			// 	}
			// },
			// onShareTimeline(res) {
			// 	if (res.from === 'button') { // 来自页面内分享按钮
			// 		console.log(res.target, '2')
			// 	}
			// 	return {
			// 		title: 'data-cityPicker省市区地址选择器！'
			// 	}
			// },

			getFoodList() {
				this.$api.get('/api/merchant/food/page', {
						limit: 10,
						page: 1,
						foodType: '', //（餐饮类型: 字典
						intellectSort: '', //（智能排序：1默认排序 2好评优先 3距离优先 4高价优先 5低价优先
						islandId: '', //（所属岛屿id
						merchantCategory: 4, //（商户分类: 字典MerchantCategory
						name: '', //（商户名称
						status: 1,
					})
					.then(res => {

						this.foodList = res.data.data.list;
						this.foodList.forEach(f => {
							if (f.storeFrontPic) {
								f.storeFrontPic = f.storeFrontPic.split(',')[0]
							}
						})
					})
			},
			formatDate(date) {
				var year = date.getFullYear();
				var month = String(date.getMonth() + 1).padStart(2, '0');
				var day = String(date.getDate()).padStart(2, '0');
				return year + '-' + month + '-' + day;
			},
			// 酒店民宿列表页
			getHomestayPage() {
				var today = new Date();
				var tomorrow = new Date();
				this.HomestayFormData.arriveDate = this.formatDate(today);
				tomorrow.setDate(tomorrow.getDate() + 1);
				this.HomestayFormData.leaveDate = this.formatDate(tomorrow);
				console.log(this.HomestayFormData, 'this.FormData');
				this.$api.get("/api/hotel/getHomestayPage", this.HomestayFormData).then((res) => {
					if (res.data.code === 0) {

						this.stayList = res.data.data.list
					} else this.$showModal(res.data.msg);
				});
			},
			changeArrive() {
				console.log('123');
				this.arriveShow = true
			},

			changeRadio(e) {
				console.log(e, 'eeeeee');
			},
			// 查询出发地和目的地
			selectAllSpot() {
				this.$api.post('/api/tripspot/selectAllSpot').then(res => {
					if (res.data.code == 0) {
						this.startPortList = res.data.data.startPortList
						this.provinceList = res.data.data.provinceList
						this.endPortList = res.data.data.endPortList
						this.hotCity = res.data.data.hotCity
						this.hotCity1 = res.data.data.hotCity.slice(0, 5)
						const currentDate = new Date();
						const year = currentDate.getFullYear();
						const month = String(currentDate.getMonth() + 1).padStart(2, '0');
						const day = String(currentDate.getDate()).padStart(2, '0');
						const formattedDate = `${year}-${month}-${day}`;
						this.dataList.queryDate = formattedDate
						let yr = new Date(new Date().setDate(new Date().getDate()+1)).Format('MM-dd');
						this.time = yr + ' ' + this.getDayOfWeek(this.dataList.queryDate);
						const groups = {};
						for (const item of this.provinceList) {
							const initial = item.initial;
							if (!groups[initial]) {
								groups[initial] = [];
							}
							groups[initial].push(item);
						}
						this.groups = groups
					}

				})
			},
			change(e) {
				console.log('change', e);
			},
			clickTab(index) {
				this.currentIndex = index
			},
			getScenicSpotList() {
				this.$api.get('/api/scenic/page', this.fromData)
					.then(res => {
						if (res.data.code == 0) {
							console.log(res, 'resresresre+++++s');
							this.spotList = this.spotList.concat(res.data.data.list);
							console.log(this.spotList, 'spotList');
						}
						console.log(res, 'res');
					})
			},
			// 跳转详情
			toDetails(item, type) {
				if (type == 1) { // 去美食详情
					uni.navigateTo({
						url: "/pagesTrip/fineFood/details/details?list=" + JSON.stringify({
							...item
						})
					})
				} else if (type == 2) { // 去酒店详情
					uni.navigateTo({
						url: "/pagesTrip/hotel/details/index?list=" +
							JSON.stringify([{
								homestayId: item.id,
								name: item.name,
								...this.HomestayFormData
							}, ]),
					});
				} else if (type == 3) { //去景点详情
					uni.removeStorageSync('spid_old');
					uni.removeStorageSync('price_old');
					uni.navigateTo({
						url: "/pagesTrip/scenicSpots/spotDetail?spid=" + item.ismapId + '&price=' + item
							.startPrice + '&isBuy=' + item.isBuy
					})

					// uni.removeStorageSync('spid_old');
					// uni.removeStorageSync('price_old');
					// uni.navigateTo({
					// 	url: "/pagesTrip/scenicSpots/spotDetail?spid=" + item.id + '&price=' + item.price +
					// 		'&isBuy=' + item.isBuy
					// })
				}

			},
			changeTopTab(index) {
				this.currentTab = index
			},
			open() {

			},
			close() {

			},
			change() {},
			toHref(url) {
				uni.navigateTo({
					url: url
				})
			},
			// 选择目的地港口
			chooseEndPort(index) {
				console.log(index, '进来了');
				this.endPortIndex = index
				this.dataList.endSpot = this.endPortList[index]
				this.arriveShowClose()
			},
			arriveShowClose() {
				this.arriveShow = false
			},
			// 选择出发地港口
			chooseStartPort(index) {
				console.log(index, '进来了');
				this.startPortIndex = index
				this.dataList.startSpot = this.startPortList[index]
				this.beginShowClose()
			},
			// 选择热门城市
			chooseHotCity(item, index) {
				this.dataList.startSpot = item
				this.beginShowClose()
				this.cityIndex = index
				console.log(this.cityIndex, 'index');
			},
			// 日历确定时间
			timeConfirm(e) {
				console.log(e, '日期');
				this.timeShow = false
				this.dataList.queryDate = e[0]
				this.time = this.dataList.queryDate.slice(-5) + ' ' + this.getDayOfWeek(e[0])
			},
			// 关闭日历
			timeClose() {
				this.timeShow = false
			},
			// 根据日期获取当前是周几
			getDayOfWeek(dateString) {
				var date = new Date(dateString);
				var weekdays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
				var dayOfWeek = date.getDay();
				var dayOfWeekText = weekdays[dayOfWeek];
				return dayOfWeekText;
			},
			submit() {
				console.log(this.dataList.queryDate, 'this.dataList');
				// 存储数据
				uni.setStorageSync('timeDate', {
					timeDate: this.time,
				});

				if (!this.dataList.queryDate) {
					uni.showToast({
						title: '请选择日期',
						icon: 'none'
					})
					return
				}
				if (!this.dataList.startSpot.name) {
					uni.showToast({
						title: '请选择起点',
						icon: 'none'
					})
					return
				}
				if (!this.dataList.endSpot.name) {
					uni.showToast({
						title: '请选择目的地',
						icon: 'none'
					})
					return
				}
				if (!this.dataList.trafficType) {
					uni.showToast({
						title: '请选择公共交通/自驾出行',
						icon: 'none'
					})
					return
				}
				// console.log('this.time', this.time)
				// if (this.dataList.trafficType == 2) {

				// 	if (this.dataList.startSpot.lat >= 30.287500) {
				// 		uni.navigateTo({
				// 			url: '/pagesTaxi/travelPlanning1/driveBySelf?startSpot=' + this.dataList.startSpot
				// 				.name +
				// 				'&endSpot=' + this.dataList.endSpot.name + '&myday=' + this.time
				// 		})
				// 	} else {
				// 		uni.navigateTo({
				// 			url: '/pagesTaxi/travelPlanning1/driveBySelf?startSpot=' + this.dataList.startSpot
				// 				.name +
				// 				'&endSpot=' + this.dataList.endSpot.name + '&myday=' + this.time
				// 		})
				// 	}

				// 	return
				// }

				this.$api.post('/api/tripspot/autoGenTripPlanNew', this.dataList).then(res => {
					console.log(this.dataList, 'res11111111111');
					if (res.data.code == 0 && res.data.data.length) {
						uni.navigateTo({
							url: '/pagesTaxi/travelPlanning1/NewRouteProgramme?list=' + JSON.stringify(res
								.data.data) + '&dataList=' + JSON.stringify(this.dataList)
						})


					} else {
						uni.showToast({
							title: '暂无数据！',
							icon: 'none'
						})
						return
					}
				})
			}
		}
	}
</script>
<style>
	.citysIndex {
		width: 100%;
		height: 100%;
		/* height: calc(100% - 50px); */
	}

	.citysHead {
		padding: 0 36rpx;
	}

	.citysTitle {
		margin-top: 34rpx;
		font-size: 28rpx;
		font-weight: 600;
	}

	.citysTitle label:nth-child(2) {
		display: inline-block;
		font-weight: 500;
		margin-left: 40rpx;
	}

	/* 热门城市 */
	.citysHot {
		width: 100%;
		padding-bottom: 20rpx;
		border-bottom: 2rpx solid #eee;
	}

	.citysHot-list {
		margin-top: 20rpx;
	}

	.citysHot-list view {
		display: inline-block;
	}

	.citysHot-list label {
		display: inline-block;
		margin-right: 20rpx;
		margin-bottom: 20rpx;
		width: 28%;
		height: 60rpx;
		border: 2rpx solid #eee;
		line-height: 60rpx;
		text-align: center;
		font-size: 24rpx;
		border-radius: 8rpx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.citysHot-list view:nth-child(3n+3) {
		margin-right: 0;
	}

	/* 所有城市 */
	.citysList {
		padding: 0 36rpx;
	}

	.citysIndexList {
		position: relative;
	}

	.index-sidebar {
		display: flex;
		flex-direction: column;
		position: fixed;
		right: 36rpx;
		text-align: center;
		top: 38%;
		-webkit-user-select: none;
		user-select: none;
		color: #a0a0a0;
	}

	.index-bar {
		width: 20px;
		border-radius: 50%;
		text-align: center;
		font-size: 18rpx;
		font-family: PingFang-SC, PingFang-SC;
		font-weight: bold;
		color: #88919D;
		line-height: 32rpx;
	}

	.index-bar:active {
		background: #1474ED;

		font-size: 13px;
		color: #bdbdbd;
		margin-bottom: 5px;
		width: 20px;
		height: 10px;
		border-radius: 70%;
		line-height: 10px;
		text-align: center;
	}

	.listIndexTitle {
		width: 100%;
		background: #F5F8FA;

		color: #c3c3c3;
		font-size: 13px;

	}

	.listIndexText {
		width: 100%;
		height: 84rpx;
		line-height: 84rpx;
		box-shadow: inset 0rpx -1rpx 0rpx 0rpx #EFEFEF;
	}

	.listIndexText label {
		display: block;
		width: 100%;
		height: 100%;
		font-size: 26rpx;
		font-weight: bold;
	}

	.cityChecked {
		color: #1474ED;
	}
</style>

<style lang="scss">
	// ::v-deep .v-calendar .uicon-close{
	// 	font-size: 28rpx !important;
	// 	}

	.list-cell {
		display: flex;
		box-sizing: border-box;
		width: 100%;
		padding: 10px 24rpx;
		overflow: hidden;
		color: #323233;
		font-size: 14px;
		line-height: 24px;
		background-color: #fff;
	}

	::v-deep .u-radio {
		margin-right: 60rpx;
	}

	::v-deep .u-radio__text {}

	/deep/.top .u-icon__icon {
		font-size: 36rpx !important;

	}

	/deep/.uicon-close {
		font-size: 14px;
	}

	/deep/.u-tabs__wrapper__nav__line {
		width: 20px !important;

		transition-duration: 300ms;
		height: 3px !important;
		background: #007A69;
		background-size: cover;

	}

	/deep/.u-tabs__wrapper__nav__item {
		padding: 0 23px !important;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}

	.pages {
		background: #F5F8FA;
		padding-bottom: 40rpx;
		box-sizing: border-box;

		.popUp {
			.port {
				height: 835rpx;
				padding: 20rpx 0;

			}

			.city {
				padding: 20rpx 0;
				height: 835rpx;

				.hotCity_selected {
					color: #01B9F9;
				}

				.cityChoosed {
					display: flex;
					flex-direction: row;
					justify-content: flex-start;
					padding: 13rpx 35rpx;

				}

				.hotCity {
					padding: 18px 30rpx;

					display: grid;
					grid-template-columns: auto auto auto auto auto;
					grid-gap: 10px;

					span {
						font-size: 26rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						color: #2C2C2C;
					}
				}
			}

			.tabs {
				border-bottom: 1rpx solid #efefef;

			}

			.popupTitle {
				font-size: 32rpx;
				font-weight: 700;

				padding: 27rpx;

				text {
					font-family: PingFangSC, PingFang SC;
					font-weight: 600;
					font-size: 34rpx;
					color: #2C2C2C;
					line-height: 40rpx;
				}
			}

			.mainContent {
				margin-top: 43rpx;
				margin-bottom: 100rpx;
				display: grid;
				grid-template-columns: 31% 31% 31%;
				gap: 10px;
				padding: 0 20rpx;
				box-sizing: border-box;

				.portStyle {


					height: 72rpx;
					border: 1rpx solid #EFEFEF;
					margin-bottom: 20rpx;
					text-align: center;
					line-height: 72rpx;
					border-radius: 16rpx;
				}

				.portStyle_selected {


					height: 72rpx;
					font-weight: bold;
					color: #01B9F9;
					margin-bottom: 20rpx;
					text-align: center;
					line-height: 72rpx;
					border-radius: 16rpx;
					background: url('https://i.ringzle.com/file/20240112/eebcd206125747d797ab8ca979fe610d.png');
					background-repeat: no-repeat;
					background-size: contain;
				}
			}
		}

		.top {
			background-repeat: no-repeat;
			position: relative;
			padding: 1rpx 24rpx;

			.mainContent {
				background: #fff;
				border-radius: 16rpx;
				margin-top: 280rpx;

				.custom {
					border-radius: 16rpx;
					padding: 20rpx 30rpx;
					background: #fff;

					.title {
						font-size: 32rpx;
						font-weight: 700;
					}

					.custom1 {
						padding: 42rpx 20rpx;
						margin: 28rpx 0;
						border-radius: 8rpx;
						display: flex;
						flex-direction: row;
						align-items: center;
						justify-content: flex-start;


						.right {
							display: flex;
							flex-direction: column;
							margin-left: 30rpx;

							span:nth-child(1) {
								font-weight: 700;
								font-size: 33rpx;
							}

							span:nth-child(2) {

								color: #88919D;


							}
						}

						&>image {
							width: 54rpx;
							height: 54rpx;
						}
					}
				}


				.mainC_1 {
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					align-items: center;
					border-bottom: 1rpx #efefef solid;


					padding: 34rpx 26rpx;

					.lxxz {
						width: 50%;
						font-weight: 700;
						font-size: 32rpx;
					}

				}

				.mainC_2 {
					display: flex;
					flex-direction: row;
					justify-content: space-around;
					align-items: center;
					border-bottom: 1rpx #efefef solid;
					font-size: 30rpx;
					padding: 20rpx;

					.icon {
						width: 64rpx;
						height: 64rpx;
						background: url('https://i.ringzle.com/file/20240111/56911b6385f64bbb8429521c06334f55.png');
						background-repeat: no-repeat;
						background-size: cover;
					}

					.input {
						width: 40%;
						height: 45rpx;
						font-size: 32rpx;

						font-weight: Regular;

						line-height: 45rpx;
					}
				}

				.mainC_3 {
					display: flex;
					flex-direction: row;
					justify-content: flex-start;
					align-items: center;
					padding: 20rpx;
					border-bottom: 1rpx #efefef solid;

					.city_selected {
						background: #F7F7F7;
						border-radius: 6px;
						padding: 10rpx 16rpx;
						margin-right: 20rpx;
						color: #01B9F9;
						font-size: 24rpx;
						font-weight: Regular;
					}

					.city {
						background: #F7F7F7;
						border-radius: 6px;
						padding: 10rpx 16rpx;
						margin-right: 20rpx;
						color: #666666;
						font-size: 24rpx;
						font-weight: Regular;

					}

				}

				.mainC_4 {
					font-weight: 700;
					display: flex;
					flex-direction: row;
					justify-content: flex-start;
					align-items: center;
					padding: 20rpx;
					border-bottom: 1rpx #efefef solid;


					font-size: 30rpx;

					.span1 {
						color: #b5b5b5;
						font-size: 30rpx;
						text-align: left;
						font-weight: 300;
						margin-left: 20rpx;
					}
				}

				.mainC_5 {
					padding: 30rpx 20rpx;

					.btn {
						background: url('https://i.ringzle.com/file/20240111/3a37b69d0b8e44f8b5a685d18b1cc785.png');
						background-repeat: no-repeat;
						background-size: contain;
						height: 93rpx;
						width: 100%;
						display: block;
					}
				}

				.mainC_tabbar {
					display: flex;
					flex-direction: row;
					height: 120rpx;
					line-height: 120rpx;
					font-size: 32px;
					color: #666666;
					background: url('https://i.ringzle.com/file/20240111/73e8785ad2e24a31b73644d958ca6c87.png') repeat center;
					border-radius: 16rpx;
					font-size: 18px;
					position: relative;

					.title {
						width: 50%;
						text-align: center;
					}

					.title_selected {
						width: 50%;
						text-align: center;
						font-weight: 700;
						color: #000000;
					}

					.title1 {
						position: absolute;
						bottom: 0;
						width: 100%;
						height: 20rpx;
					}
				}

				.mainC_tabbar_selected {}
			}
		}

		.question {
			margin-top: 30rpx;
			background: #fff;
			border-radius: 16rpx;
			padding: 20rpx;

			.title {
				padding: 20rpx;
				font-size: 32rpx;
				font-weight: 700;
			}
		}

		.bottom {
			position: relative;
			margin-top: 48rpx;

			.tabbar {
				display: flex;
				justify-content: space-evenly;
				color: #6d6d6d;
				font-size: 31rpx;
				align-items: flex-start;



				.tabar1 {
					width: 163rpx;
					height: 69rpx;
					background-repeat: no-repeat;
					background-size: contain;
				}

				.tabar2 {
					background: url('https://i.ringzle.com/file/20240111/1a974b9f72574570bc24e20ffe0ce681.png') repeat center;
					width: 163rpx;
					height: 69rpx;
					background-repeat: no-repeat;
					background-size: contain;
				}

				.tabar3 {
					background: url('https://i.ringzle.com/file/20240111/c881d86123584544aad5ec9d39ea028e.png') repeat center;
					width: 163rpx;
					height: 69rpx;
					background-repeat: no-repeat;
					background-size: contain;
				}

				.tabar4 {}
			}

			.showPic {
				display: flex;
				justify-content: space-between;
				flex-wrap: wrap;
				padding: 0 20rpx;

				.cl_card {
					margin-top: 16rpx;
					background: #FFFFFF;
					box-shadow: 0rpx 4rpx 16rpx 0rpx rgba(0, 0, 0, 0.06);
					border-radius: 16rpx;
					position: relative;
					width: 48%;


					&>image {
						width: 100%;
						height: 280rpx;
						border-radius: 16rpx;

					}

					.clc_info {
						width: 100%;
						padding: 20rpx 20rpx 24rpx;
						box-sizing: border-box;

						.clci_name {
							font-size: 28rpx;
							font-family: PingFang-SC, PingFang-SC;
							font-weight: bold;
							color: #333333;
							line-height: 40rpx;
						}

						.clci_price {
							margin-top: 16rpx;
							display: flex;
							align-items: flex-end;

							.cp_s1 {
								font-size: 28rpx;
								font-family: PingFang-SC, PingFang-SC;
								font-weight: bold;
								color: #FF4141;
							}

							text {
								font-size: 36rpx;
								font-family: PingFang-SC, PingFang-SC;
								font-weight: bold;
								color: #FF4141;
							}

							.cp_s2 {
								font-size: 24rpx;
								font-family: PingFangSC, PingFang SC;
								font-weight: 400;
								color: #ABB0B5;
							}
						}
					}

					.clc_type {
						width: 72rpx;
						height: 36rpx;
						background: rgba(24, 24, 24, .5);
						border-radius: 16rpx 0rpx 24rpx 0rpx;
						line-height: 36rpx;
						text-align: center;
						font-size: 22rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						color: #FFFFFF;
						position: absolute;
						left: 0;
						top: 0;
					}
				}
			}
		}
	}
</style>